import React, { useEffect, useMemo, useState,useRef } from 'react'
import { View,Image,Text, Button,Input, ScrollView } from '@tarojs/components'
import Taro, { useDidShow, usePageScroll,useShareAppMessage } from '@tarojs/taro'
import { AtModal,AtActionSheet,AtFloatLayout  } from 'taro-ui'
import ProGress from '@/components/pro-gress'
import wx from '@/utils/weixin-js-sdk/index';
import {getUrlParam,checkSalesMan,throttle} from "@/utils/Tools";
import "taro-ui/dist/style/components/modal.scss";
import "taro-ui/dist/style/components/action-sheet.scss";
import "taro-ui/dist/style/components/float-layout.scss";

import './index.scss'

export default function EventDetail() {
  const timerRef = useRef(null);
  let tabsList = ['活动介绍','报名须知']
  const [id,setId] = useState('')
  const [title,setTitle] = useState('')
  const [dy,setDy] = useState(0)
  const [isTabs,setIsTabs] = useState(0)
  const [isFixed,setIsFixed] = useState(false)
  const [showGroupUser,setShowGroupUser] = useState(false)
  const [showPersonInfo,setShowPersonInfo] = useState(false)
  const [showNotice,setShowNotice] = useState(false)
  const [PopupSpecs,setPopupSpecs] = useState(false)
  const [PopupService,setPopupService] = useState(false)
  const [isTiktok,setIsTiktok] = useState(false)
  const [serviceList,setServiceList] = useState([])
  const [stepsList,setStepsList] = useState([])
  const [info,setInfo] = useState({})
  const [StepInfo,setStepInfo] = useState({})
  const [userInfo,setUserInfo] = useState({gender:'2'})
  const [nameFocus,setNameFocus] = useState(false)
  const [ossData,setOssData] = useState(null)
  const [user,setUser] = useState({})
  const [editNickname, setEditNickname] = useState('');
  const [recordPersonList, setrecordPersonList] = useState([])
  let capsule = {
    height:40
  }
  if(process.env.TARO_ENV == 'weapp' || process.env.TARO_ENV == 'kwai') capsule = Taro.getMenuButtonBoundingClientRect()
  useEffect(()=>{
    _initData()
    Taro.eventCenter.off('updateLogin')
    Taro.eventCenter.on('updateLogin',throttle((res)=>{
      _initData()
    },3000))
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  },[])
  const _initData = e=>{
    Taro.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#000008'
    })
    const {router} = Taro.getCurrentInstance()
    const id = router.params.id
    setId(id)
    checkSalesMan(router.params)
    if(process.env.TARO_ENV == 'tt'){
      setIsTiktok(true)
      // this.review = getApp().globalData.review
    }
    Taro.$get('/act/mis-label',{activityId:id}).then(res=>{
      if(res.code == '1') setServiceList(res.content || [])
    })
    Taro.$post(`/act/gather/detail`,{
      id,
      "latitude": Taro.getStorageSync('position').latitude,
      "longitude": Taro.getStorageSync('position').longitude
    }).then(res=>{
      if(res.code == '1'){
        let {recordNum,establishTickets,maxTickets,title,isEstablish} = res.content
        setTitle(`活动详情 | ${title}`)
        setInfo(res.content)
        if(res.content.recordPersonList?.length){
          let currentIndex = 0;
          timerRef.current = setInterval(() => {
            const nextIndex = currentIndex + 20;
            const newData = res.content.recordPersonList.slice(currentIndex, nextIndex);
            setrecordPersonList(prev => [...prev, ...newData]);
            currentIndex = nextIndex;
            if (currentIndex >= res.content.recordPersonList.length) {
              clearInterval(timerRef.current);
            }
          }, 1000); // 每秒渲染一批
        }
        setStepsList([recordNum, establishTickets, maxTickets])
        setStepInfo({
          Current: recordNum>=establishTickets?62+GetPercent(recordNum,maxTickets)*(1-0.62) : GetPercent(recordNum,maxTickets),//百分比
          Sum: [0,1,2]
        })
        if(res.content.isShowRule == '1'){
          setTimeout(()=>{
            setPopupSpecs(true)
          },500)
        }
      }else{
        Taro.$toast(res.message)
      }
    })
    if(process.env.TARO_ENV === 'h5'){
      Taro.wxsdk()
    }
    Taro.$get('/common/external/aliyun/getToken').then(res=>{
      if(res.code == '1'){
        setOssData(res.content)
      }else{
        Taro.$toast(res.message)
      }
    })
  }
  
  usePageScroll(e=>{
    setDy(e.scrollTop)
    const viewHeight = Taro.getSystemInfoSync().screenHeight
    const query = Taro.createSelectorQuery()
    query.select('.main-notice').boundingClientRect(data => {
      if (data.bottom >= 0 && data.bottom < viewHeight) {
        setIsTabs(1)
      }
    }).exec();
  })
  useShareAppMessage(()=>{
    return {
      title:title||'活动详情',
      path: `/mainPages/event-detail/index?id=${info.id}`
    }
  })

  const sellTime = useMemo(()=>{
    try{
      const sellArr = info.sellStartTime.split(' ')
      const date = sellArr[0].split('-')
      const time = sellArr[1].split(':')
      return `${date[1]}/${date[2]} ${time[0]}:${time[1]}`
    }catch(e){
      return info.sellStartTime
    }
  },[info.sellStartTime])
  
  function GetPercent(num, total) {  ///百分比计算
    num = parseFloat(num);
    total = parseFloat(total);
    if (isNaN(num) || isNaN(total)) {
      return 0;
    }
    return total <= 0 ? "0" : (Math.round(num / total * 10000) / 100.00);
  }
  
  function handleToScene(){  ///  精彩现场
    Taro.navigateTo({
      url:`/mainPages/exciting-scene/index?id=${info.id}&title=${info.title}`
    })
  }
  
  function handleReservation(){  ///  点击预约购票
    Taro.verifyLogin()
    if(process.env.TARO_ENV == 'h5'){
      Taro.$toast('该功能不支持H5')
      return;
    }
    if(!info.wantWatch){
      const temp = info.templateIds
      Taro.requestSubscribeMessage({
        tmplIds: temp,
        success: async (res) => {
          if(res[temp[0]] == 'accept'){
            handleWantGo()
          }
        },
        complete:ret=>{
          console.log(ret,'s-------')
        }
      })
      return;
    }
    handleWantGo()
  }
  
  const handleWantGo = async()=>{  // 点击想去
    const data = {
      scheduleId:info.id,
      status:info.wantWatch?0:1,
      openId: await Taro.getOpenId(),
      templateIds: info.templateIds
    }
    Taro.showLoading({
      title:'加载中...'
    })
    const res = await Taro.$post('/act/activities/wantWatch',data,1)
    if(res.code == '1'){
      setInfo({...info,wantWatch:data.status})
      if(data.status == 1){
        setShowNotice(true)
        setTimeout(()=>{
          setShowNotice(false)
        },3000)
      }else{
        Taro.$toast('提交成功','success')
      }
    }else{
      Taro.$toast(res.message)
    }
  }

  async function handleToSeat(bool){
    Taro.verifyLogin()
    Taro.showLoading({title:'加载中'})
    const value = await Taro.$get('/mb/users','','1')
    const user = value.content || {}
    if((user.defaultAvatar == '0' && user.defaultNickName == '0') || bool){
      if(process.env.TARO_ENV != 'h5' && info.jumpPath){
        const url = info.jumpPath
        Taro.navigateToMiniProgram({
          appId:url.appid,
          path: url.path,
        })
        return;
      }
      if(info.scheduleType > 1){
        Taro.navigateTo({
          url:`/orderSubPack/order-options/index?id=${info.id}`
        })
        return;
      }
      if(process.env.TARO_ENV == 'kwai'){
        Taro.navigateTo({
          url: `/mainPages/seat-old/index?planId=${info.id}`,
        })
        return;
      }
      Taro.navigateTo({
        url:`/mainPages/seat/index?id=${info.id}`
      })
      return;
    }
    Taro.showLoading({title:'加载中'})
    Taro.$get('/mb/users','','1').then(res=>{
      if(res.code == '1'){
        setUser(res.content)
        setEditNickname(res.content.nickName)
        if((res.content.defaultAvatar == '0' && res.content.defaultNickName == '0') || bool){
          if(process.env.TARO_ENV != 'h5' && info.jumpPath){
            const url = info.jumpPath
            Taro.navigateToMiniProgram({
              appId:url.appid,
              path: url.path,
            })
            return;
          }
          if(!info.hallId){
            Taro.navigateTo({
              url:`/orderSubPack/order-options/index?id=${info.id}`
            })
            return;
          }
          Taro.navigateTo({
            url:`/mainPages/seat/index?id=${info.id}&filmName=${encodeURIComponent(info.topicTitle)}`
          })
          return;
        }
        Taro.$get('/common/external/aliyun/getToken').then(res=>{
          if(res.code == '1'){
            setOssData(res.content)
            setShowPersonInfo(true)
          }else{
            Taro.$toast(res.message)
          }
        })
      }
    })
  }
  function handleTabs(e){  /// 滚动到底部
    setIsTabs(e)
    Taro.pageScrollTo({
      selector: `.tab${e}`,//你要跳转的样式位置
      duration: 300,//跳转时间段
    })
  }
  function handleOpenMap(){  // 打开地图
    if(process.env.TARO_ENV == 'h5'){
      wx.checkJsApi({
        jsApiList: ['openLocation'],
        success: (suc)=> {
          setTimeout(()=>{
            wx.openLocation({
              latitude: parseFloat(this.info.location.latitude),
              longitude: parseFloat(this.info.location.longitude),
              scale: 18,
              name:this.info.location.name,
              address:this.info.location.address,
              success(ret){
                console.log(ret)
              },
              fail(err){
                console.log(err)
              }
            });
          },400)
        },
        fail:err=>{
          console.log('checkJsApi',err)
        }
      });
    }else{
      Taro.openLocation({
        latitude: parseFloat(info.location.latitude),
        longitude: parseFloat(info.location.longitude),
        scale: 18,
        name:info.location.name,
        address:info.location.address,
        success(ret){
          console.log(ret)
        },
        fail(err){
          console.log(err)
        }
      });
    }
  }

  const getChooseAvatar = (e) => {
    const relaUrl = ossData.dir+parseInt(Date.parse(new Date()) + Math.random() * 100000) + '.jpg'
    Taro.uploadFile({
      url: ossData.host, //仅为示例，非真实的接口地址
      filePath: e.detail.avatarUrl,
      name: 'file',
      formData: {
        key: relaUrl,
        OSSAccessKeyId: ossData.accessid,
        policy: ossData.policy,
        Signature: ossData.signature,
      },
      header: {
        sassAppId:Taro.$sassAppId,
        token: Taro.getStorageSync('token'),
        channel:Taro.$channel,
      },
      success: (uploadFileRes) => {
        setUserInfo({...userInfo,avatar:ossData.host + '/' + relaUrl})
      },
      fail: (res) => {
        Taro.$toast('上传失败')
      }
    })
  }
  const handleChoiseImg = () => { ///  选择图片
    Taro.chooseImage({
      count: 1, //默认9
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album'], //从相册选择
      success: (res) => {
        const relaUrl = ossData.dir+parseInt(Date.parse(new Date()) + Math.random() * 100000) + '.jpg'
        Taro.uploadFile({
          url: ossData.host, //仅为示例，非真实的接口地址
          filePath: res.tempFilePaths[0],
          name: 'file',
          withCredentials: false,
          formData: {
            key: relaUrl,
            OSSAccessKeyId: ossData.accessid,
            policy: ossData.policy,
            Signature: ossData.signature,
          },
          header: {
            sassAppId:Taro.$sassAppId,
            token: Taro.getStorageSync('token'),
            channel:Taro.$channel,
          },
          success: (uploadFileRes) => {
            setUserInfo({...userInfo,avatar:ossData.host + '/' + relaUrl})
          },
          fail: (res) => {
            Taro.$toast('上传失败')
          }
        })
      }
    });
  }
  const filterRichTextContent = (content = '') => {
    return content.toString().replace(/\<img\s+/gi, `<img style="width:100%" mode="widthFix" `);
  };
  return (
    <View className={`event-detail ${process.env.TARO_ENV}`}>
      {isTiktok?null:<View className="uni-nav-bar" style={{paddingTop:capsule.top+'PX',height:capsule.height+'PX',backgroundColor:dy>10?'rgba(0,0,8,.8)':'transparent'}}>
        <View style={{color:'#fff',fontSize:'18px'}} className="at-icon at-icon-chevron-left" onClick={()=>{
          Taro.navigateBack().catch(()=>{
            Taro.reLaunch({
              url:'/pages/index/index'
            })
          })
        }}></View>
        {info.merchantId?
        <View className="box-flex" style={{alignItems:'center',marginLeft:10,marginRight:'auto',color:'#fff',fontSize:12}} onClick={()=>{
          Taro.navigateTo({
            url:'/mainPages/store-homepage/index?id='+info.merchantId
          })
        }}>
          <Image style={{width:16,height:16,borderRadius:'50%',marginRight:8}} src={info.merchantLogo} mode="aspectFill"></Image>
          {info.merchantName || ''} <Image src={require('@/static/verified.png')} style={{width: 16, height: 16, marginLeft: '3px'}}></Image>
          <Text className='at-icon at-icon-chevron-right'></Text>
        </View>:null}
        {process.env.TARO_ENV == 'h5'?null:
        <Button className="bar-share" open-type="share" style={{width:capsule.height+'PX',height:capsule.height+'PX'}}>
          <Image src={require('@/static/share.svg')} mode="widthFix"></Image>
        </Button>}
        <View className="bar-right" style={{width:capsule.width+'PX',height:capsule.height+'PX'}}></View>
      </View>}
      {info.id?<>
      <View className="detail-header">
        <View className="detail-bg"><Image src={info.logo} className="img"></Image></View>
        <View className="box-flex">
          <Image className="header-img" src={Taro.getMedia(info.logo)} mode="aspectFill"></Image>
          <View className="header-info">
            {info.topicTitle?<View className="dot h4">{info.topicTitle}</View>:null}
            <View className="dot3 h2">{info.title}</View>
            {info.tagsJson?
            <View className="info-list">
              {info.tagsJson.map(tag=>{
                return <Text className={tag.source == 'PLATFORM'?'red span':'span'} key={tag.tagName}>{tag.tagName}</Text>
              })}
            </View>:null}
            <View className="p dot" style={{marginTop:4}}><Image src={require('@/static/icon_calendar.png')} /> {info.dateStr}</View>
            <View className="p" onClick={()=>{handleOpenMap()}}><Image src={require('@/static/icon_map-pin.png')} /> {info.distance?info.distance:''}&nbsp;<Text className='dot'>{info.location?.address}</Text> <Text className='at-icon at-icon-chevron-right'></Text></View>
            {info?.hall?.name?<View className="p dot"><Image src={require('@/static/icon-space.png')} /> {info.hall.name}</View>:null}
          </View>
        </View>
  
        <AtModal isOpened={PopupSpecs} onClose={()=>{setPopupSpecs(false)}}>
          <View className="popup-specs">
            <View className="specs-box">
              <View className="specs-header">
                <View className='h2'>购票须知</View>
                <Image src={require('@/static/event-rules_2x.png')} className="header-img"></Image>
              </View>
              <View className="specs-main" dangerouslySetInnerHTML={{
                __html: filterRichTextContent(info.refundNotes),
              }} ></View>
              <View className="specs-button" onClick={()=>{setPopupSpecs(false)}}>确认并知悉</View>
            </View>
          </View>
        </AtModal>
        {serviceList.length?
        <View className="detail-service" onClick={()=>{setPopupService(true)}}>
          <View className="service-h2">服务</View>
          <View className="service-list dot">
            {serviceList.slice(0,4).map((item)=>{
              return <View className="list-item" key={item.desc}>
              <Image src={item.logo} className="item-img"></Image>
              {item.name}
            </View>
            })}
          </View>
          <Text className='at-icon at-icon-chevron-right' style={{color:'#b5afad',fontSize:12}}></Text>
        </View>:null}
        <AtModal isOpened={PopupService} onClose={()=>{setPopupService(false)}}>
          <View className="popup-specs">
            <View className="specs-box">
              <View className="specs-header">
                <View className='h2'>服务保障</View>
                <Image src={require('@/static/event-rules_2x.png')} className="header-img"></Image>
              </View>
              <View className="specs-main">
                {serviceList?.map(item=>{
                  return <View className='p' key={item.desc}><Image src={item.logo} className='span' style={{width: 16,height:16,top:3}}></Image><Text className="strong">{item.name}：</Text>{item.desc}</View>
                })}
              </View>
              <View className="specs-button" onClick={()=>{setPopupService(false)}}>确认并知悉</View>
            </View>
          </View>
        </AtModal>
        <View className="header-enroll">
          {info.establishTickets>0?<>
            <View className="enroll-h2">
              {info.isEstablish?<View className='h2'>已成团 <Image className="h2-img" src={require('@/static/yuan.png')}></Image> </View>:<View className='h2'>正在组团</View>}
              <View className="h2-span" onClick={()=>{setPopupSpecs(true)}}><Image className="span-img" src={require('@/static/alert-circle.svg')}></Image> 组团规则说明</View>
            </View>
            <ProGress style={{marginTop: 15,display: 'block'}} isEstablish={info.isEstablish} list={stepsList} StepInfo={StepInfo}></ProGress>
          </>:null}
          {recordPersonList.length?
          <View className="enroll-list">
            {recordPersonList.slice(0, 6).map((item,index)=>{
              return <View className='list-item' key={index}>
                <View className="item-img">
                  <Image src={item.nikeLogo} mode="aspectFill"></Image>
                  {item.gender == '1'?<Image src={require('@/static/man-icon.svg')} className='img-icon' />:null}
                  {item.gender == '2'?<Image src={require('@/static/women-icon.svg')} className='img-icon' />:null}
                </View>
                <View className='p'>{item.nikeName?.slice(0,3)}</View>
              </View>
            })}
            <View className='list-item' onClick={()=>{setShowGroupUser(true)}}>
              <View className="item-img"><Image src={require('@/static/more.svg')} mode="aspectFill"></Image></View>
              <View className='dot'>更多</View>
            </View>
          </View>:null}
        </View>
        <AtFloatLayout scrollY={false} scrollX={false} className='group-user' isOpened={showGroupUser} onClose={()=>{setShowGroupUser(false)}}>
          <View className="user-header">
            <View></View>
            <View className="header-h2">组团用户</View>
            <View className="at-icon at-icon-close" onClick={()=>{setShowGroupUser(false)}}></View>
          </View>
          {showGroupUser?
          <View className="user-list">
            {recordPersonList.map((item,idx)=>{
              return <View className="list-item" key={idx}>
              <View className="item-img">
                <Image src={item.nikeLogo} lazyLoad mode="aspectFill"></Image>
                {item.gender == '1'?<Image src={require('@/static/man-icon.svg')} lazyLoad className='img-icon' />:null}
                {item.gender == '2'?<Image src={require('@/static/women-icon.svg')} lazyLoad className='img-icon' />:null}
              </View>
              <View className="item-info">
                <View className='info-h2'>{item.nikeName}</View>
                <View className="info-p dot2">{item.desc}</View>
              </View>
            </View>
            })}
          </View>:null}
        </AtFloatLayout>
        <AtActionSheet className='group-user' isOpened={showPersonInfo} onClose={()=>{setShowPersonInfo(false)}}>
          <View className="user-header">
            <View></View>
            <View className="header-h2">个人信息</View>
            <View className="at-icon at-icon-close" onClick={()=>{setShowPersonInfo(false)}}></View>
            <View className="header-p">同步微信的头像和昵称，方便和商家或团长联系</View>
          </View>
          <View className="user-main">
            <View className="main-item">
              <View className="item-label">头像</View>
              {process.env.TARO_ENV == 'h5'?
              <Button className="box-flex" onClick={()=>{handleChoiseImg()}}>
                {userInfo.avatar?<Image className='item-avatar' src={userInfo.avatar}></Image>:<>
                  <Image src={require('@/static/Avatar.svg')} className='item-avatar' />
                  <Text className='item-span'>点击上传微信头像</Text>
                </>}
              </Button>:
              <Button className="box-flex" open-type="chooseAvatar" onChooseavatar={getChooseAvatar}>
                {userInfo.avatar?<Image className='item-avatar' src={userInfo.avatar}></Image>:<>
                  <Image src={require('@/static/Avatar.svg')} className='item-avatar' />
                  <Text className='item-span'>点击同步微信头像</Text>
                </>}
              </Button>}
            </View>
            <View className="main-item">
              <View className="item-label">昵称</View>
              {showPersonInfo?<Input type='nickname' className="input" value={editNickname} focus={nameFocus} onInput={e=>{
                setEditNickname(e.detail.value);
              }} onBlur={e=>{
                if(editNickname){
                  setEditNickname(e.detail.value);
                  return;
                }
                setEditNickname(user.nickName || '火星人#1211');
              }} placeholder="请输入您的昵称" />:null}
            </View>
            <View className="main-item">
              <View className="item-label">性别</View>
              <View className="item-radio">
                <View onClick={e=>{
                  setUserInfo({...userInfo,gender:'2'})
                }} className={`radio-item ${userInfo.gender == '2'?'active':''}`}><Image src={require(`@/static/${userInfo.gender == '2'?'women-on':'women'}.svg`)} mode='aspectFill'></Image>女</View>
                <View onClick={e=>{
                  setUserInfo({...userInfo,gender:'1'})
                }} className={`radio-item ${userInfo.gender == '1'?'man':''}`}><Image src={require(`@/static/${userInfo.gender == '1'?'man-on':'man'}.svg`)} mode='aspectFill'></Image>男</View>
              </View>
            </View>
          </View>
          <View className="user-footer" style={process.env.TARO_ENV == 'h5'?{paddingBottom:20}:null}>
          {!userInfo.avatar?<>
          {process.env.TARO_ENV == 'h5'?<Button className="user-button" onClick={()=>{handleChoiseImg()}}>上传微信头像</Button>:<Button className="user-button" open-type="chooseAvatar" onChooseavatar={getChooseAvatar}>同步微信头像</Button>}
          </>:!editNickname?<View className="user-button" onClick={()=>{setNameFocus(true)}}>请输入您的昵称</View>:<View className="user-button" onClick={()=>{
            if(editNickname && userInfo.avatar){
              Taro.showLoading({title:'加载中'})
              const data = {...userInfo,nickName:editNickname}
              Taro.$put('/mb/users',data,'1').then(res=>{
                if(res.code == '1'){
                  setShowPersonInfo(false)
                  Taro.setStorageSync('user',{
                    ...Taro.getStorageSync('user'),
                    ...data,
                    defaultAvatar: 0,
                    defaultNickName: 0
                  })
                  setUser({
                    ...user,
                    defaultAvatar: 0,
                    defaultNickName: 0
                  })
                  setTimeout(() => {
                    handleToSeat(true)
                  }, 1000);
                }
              })
              return;
            }
            Taro.$toast('请先同步头像或者同步昵称')
          }}>确定</View>}
          </View>
        </AtActionSheet>
        {/* {info.goodsPersonList?.length?
        <View className="header-enroll">
          <View className="enroll-h2">
            <View className='h2' style={{width:'100%'}} onClick={()=>{setPopupSpecs(true)}}>活动专属套餐 <Text style={{fontSize:10,color:'#FFFFFFA6',marginLeft:8}}><Text style={{fontSize:12}}>18</Text>人购买</Text> <View className="h2-span"><Text className='at-icon at-icon-add' style={{marginRight:4}}></Text> 加购套餐</View> </View>
          </View>
          <View className="enroll-list">
            {info.goodsPersonList.slice(0, 6).map((item,index)=>{
              return <View className='list-item' key={index}>
                <View className="item-img">
                  <Image src={item.nikeLogo} mode="aspectFill"></Image>
                  {item.gender == '1'?<Image src={require('@/static/man-icon.svg')} className='img-icon' />:null}
                  {item.gender == '2'?<Image src={require('@/static/women-icon.svg')} className='img-icon' />:null}
                </View>
                <View className='p'>{item.nikeName?.slice(0,3)}</View>
              </View>
            })}
            <View className='list-item' onClick={()=>{setShowGroupUser(true)}}>
              <View className="item-img"><Image src={require('@/static/more.svg')} mode="aspectFill"></Image></View>
              <View className='dot'>更多</View>
            </View>
          </View>
        </View>:null} */}
        {info.scenePics && info.scenePics.length?
        <View className="detail-scene">
          <View className="scene-title">
            <View className='h2'>精彩现场</View>
            <View className='text' onClick={()=>{handleToScene()}}>查看更多 <Text className='at-icon at-icon-chevron-right' style={{fontSize:12,color:'#90989F'}}></Text></View>
          </View>
          <View className="scene-list not-bar">
            {info.scenePics.slice(0, 10).map((item,index)=>{
              return <Image onClick={()=>{
                Taro.previewImage({
                  urls:info.scenePics,
                  indicator:'number',
                  current:index
                })
              }} mode="heightFix" key={index} className="list-item" src={item}></Image>
            })}
            {info.scenePics.length>10?
            <View className="list-more" onClick={()=>{handleToScene()}}>
              <View className='p'>全部</View>
              {info.scenePics.length}张
            </View>:null}
          </View>
        </View>:null}
      </View>
      
      <View className="detail-shop" onClick={()=>{
        Taro.navigateTo({
          url:'/mainPages/store-homepage/index?id='+info.merchantId
        })
      }}>
        <View className="box-flex">
          <Image className="shop-img" src={info.merchantLogo} mode="aspectFill"></Image>
          <View className="shop-info">
            <View className='h2'>{info.merchantName || ''} <Image src={require('@/static/verified.png')} style={{width: 20, height: 20, marginLeft: '3px',verticalAlign: 'sub'}}></Image></View>
            <View className='p'>{info.merchantRemark || ''}</View>
          </View>
        </View>
        <View className='button'>进入主页</View>
      </View>
      {!Taro.$review?
      <View className="detail-main">
        <View className="main-title">
          {tabsList.map((item,index)=>{
            return <View className={`h2 ${index === isTabs?'active':''}`} key={index} onClick={()=>{handleTabs(index)}}><Text className='span'>{item}</Text></View>
          })}
        </View>
        {isFixed?
        <View className="main-title main-fixed">
          {tabsList.map((item,index)=>{
            return <View className={`h2 ${index === isTabs?'active':''}`} key={index} onClick={()=>{handleTabs(index)}}><Text className='span'>{item}</Text></View>
          })}
        </View>:null}
        <View className="main-bodyer tab0" dangerouslySetInnerHTML={{
          __html: filterRichTextContent(info.detail)
        }} ></View>
        <View className="main-notice tab1">
          <View>报名须知</View>
          <View className="notice-body" dangerouslySetInnerHTML={{
            __html: filterRichTextContent(info.notes)
          }} ></View>
        </View>
      </View>:null}
      <View className="detail-button">
        {showNotice?
        <View className="detail-notice">
          <Text className='at-icon at-icon-check' style={{marginRight: 2,fontSize:8,color:"#26282A"}} type="checkmarkempty"></Text>已添加至你的想去清单 <View className='p'>查看</View>
        </View>:null}
        {!isTiktok?
        <View className="button-info" onClick={()=>{handleReservation()}}>
          {info.wantWatch?<Image src={require('@/static/Subscribed.svg')} mode="widthFix"></Image>:<Image src={require('@/static/Subscribe.svg')} mode="widthFix"></Image>}
          <View>想去</View>
        </View>:null}
        {info.groupUrl?
        <View className="button-info" onClick={()=>{
          Taro.previewImage({
            urls:[info.groupUrl],
            current:0
          })
        }}>
          <Image src={require('@/static/wechat.svg')} mode="widthFix"></Image>
          <View>进群</View>
        </View>:null}
        {info.buttonType == '4'?<View className="button" onClick={e=>{
          Taro.verifyLogin()
        }}><View>￥{info.price}</View>限邀约购票</View>:null}
        {info.buttonType == '3'?<View className="button" disabled>已售罄</View>:null}
        {info.buttonType == '2'?<View className="button" disabled><View>￥{info.price}</View>{sellTime} 开售</View>:null}
        {info.buttonType == '1'?<View className="button" onClick={()=>{handleToSeat()}}>
          <View className='dot'>￥{info.price} 立即购买</View>
          {info.isBirdDiscount>0?<View style={{fontSize:10}}>{info.isBirdDiscountDesc}</View>:null}
        </View>:null}
      </View>
      </>:null}
    </View>
  )
}
